var t;
var timer_is_on=0;
var editmode=0;
var componentsArray = new Array();
var $data;
var $applications;
var $filteredData;

function generateComponents(list){
	var listString = list+'';
	if (listString == ''){
		document.getElementById("jscontainer").innerHTML = '';
		return;
	}
	componentsArray = list;
	if(document.getElementById("find").value == ""){
		generateComponentsFromArray(list);
	} else {
		filterS();
	}
}

function generateComponentsFromArray(arrayComponents){
//	alert(1);
	var result = '';
	for(i=0; i<arrayComponents.length;i++){
		result +=generateComponent(arrayComponents[i][0], arrayComponents[i][2], arrayComponents[i][1], arrayComponents[i][3], arrayComponents[i][6], arrayComponents[i][5], arrayComponents[i][7]);
		
	}
	document.getElementById("jscontainer").innerHTML = result;
	$(".draggable").draggable({
		'revert': true
	});
}

function generateComponent(id, type, brand, quantity, step, merna, classType){
	classType = classType.toUpperCase();
	var classTable =  'empty';
	var classVidProduct = 'vidproduct-empty';
	var classMarka = 'marka-empty';
	var classKolich = 'kolich-empty';
	var classMerna = 'mernaed-empty';
	if (quantity > 0){
		classTable = 'component-product';
		classVidProduct = 'vidproduct';
		classMarka = 'marka';
		classKolich = 'kolich';
		classMerna = 'mernaed';
	}
	
	var result='<div class="component-product-div draggable" data-marker="all" data-id="'+id+'" data-type="'+classType+'" data-searchable="'+type+' '+brand+' '+classType+'">';
	if (editmode == 1){
		result+='<div class="remove-overlay"><a href="#" onclick="remove(\''+id+'\');"></a></div>';	
	} else if (editmode == 2){
		result+='<div class="addlist-overlay"><a href="#" onclick="addToShoppingList(\''+id+'\');"></a></div>';
	}
	
	result+='<div class="'+classTable+'">';
	 result+='<div class="left-side">';
	  result+='<div class="top-side">';
	    result+='  <p class="'+classVidProduct+'">'+type+'</p>';
	    result+='  <p class="'+classMarka+'">"'+brand+'"</p>';	
	  result+='</div> '; 
	  result+='<div class="bottom-side">';
		result+='  <div class="image"><img src="images/products/'+type+'.png"></img></div>';
		result+='  <div class="'+classKolich+'"><div id='+id+' class="kolich">'+quantity+'</div></div>';
		result+='  <div class="'+classMerna+'">'+merna+'</div>';
	  result+='</div>';
	 result+='</div> ';
	 
	  result+='<div class="right-side">';
	    result+='  <input class="button-arrow-up" type="button" value="" onclick="up(\''+id+'\', \''+quantity+'\',  \''+step+'\');"></input>';
	    result+='  <input class="button-arrow-down" type="button" value="" onclick="down(\''+id+'\', \''+quantity+'\',  \''+step+'\');"></input>';
	  result+='</div>';
	result+='</div>';
	result+='</div> ';
	

	return result;
}


function up(id, count, step){
	clearTimeout(t);
	var temp = parseFloat(document.getElementById(id).innerHTML);
	document.getElementById(id).innerHTML = temp+parseFloat(step);
	t=setTimeout(function(){agent.call('','up','up_callback', id, document.getElementById(id).innerHTML);},1000);
	timer_is_on = 1;
}

function up_callback(result){
	if(document.getElementById('editbutton').value == 'айде'){
		document.getElementById('editbutton').value = 'редактиране';
	}
	generateComponents(result);
}

function edit_callback(result){
	editmode = 1;
	generateComponents(result);
}

function add_to_list_callback(result){
	generateComponents(result);
}

function down(id, count, step){
	if(document.getElementById(id).innerHTML-step<0){
		return;
	}
	clearTimeout(t);
	document.getElementById(id).innerHTML = document.getElementById(id).innerHTML-step;
	t=setTimeout(function(){agent.call('','up','up_callback', id, document.getElementById(id).innerHTML);},1000);
}

function setEditMode(){
	if(document.getElementById('editbutton').value == 'редактиране'){
		document.getElementById('editbutton').value = 'айде';
		editmode = 1;
		agent.call('','refresh','edit_callback');
	} else {
		document.getElementById('editbutton').value = 'редактиране';
		if (document.getElementById('list').value == 'hide list'){
			editmode = 2;	
		} else {
			editmode = 0;	
		}
		
		agent.call('','refresh','up_callback');
	}
}

function setEditModeDone(){
	if(document.getElementById('editbutton').value = 'айде'){
		document.getElementById('editbutton').value = 'редактиране';
	}
}

function remove(id){
	agent.call('','removeProduct','edit_callback', id);
}

function filter(){
	var filter = document.getElementById("find").value.trim().toLowerCase();
	var result = new Array();
	var j = 0;
	for(i=0; i<componentsArray.length;i++){
		if (componentsArray[i][2].toLowerCase().indexOf(filter) != -1 || componentsArray[i][1].toLowerCase().indexOf(filter) != -1){
			result[j++] = new Array(componentsArray[i][0], componentsArray[i][1], componentsArray[i][2], componentsArray[i][3], componentsArray[i][4], componentsArray[i][5], componentsArray[i][6], componentsArray[i][7])
		}
	}
	generateComponentsFromArray(result);
}

function callListRefresh(components){
	editmode = 2;
	generateComponents(components);
	document.getElementById("shopping-list-overlay").style.display = 'block';
	agent.call('', 'getList', 'refresh');
//	refresh(components);
}

function filterQ(selectedCat) {
	var tempCat = selectedCat.toUpperCase();
    agent.call('','change_category','', tempCat);
    generateCategries_o(null, tempCat,'filterQ');
    initFilterData();
    $applications.quicksand($filteredData, {
      duration: 700,
      easing: 'easeInOutQuad',
      adjustHeight: 'false',
      useScaling: false
    });
}

function initFilterData(){
	var tempCat = selectedCategoryField.toUpperCase();
    if (tempCat == 'ВСИЧКИ') {
      $filteredData = $data.find('div[data-marker=all]');
    } else {
      $filteredData = $data.find('div[data-type=' + tempCat	 + ']');
    }
}

function filterS() {
	initFilterData();
	var tempCat = trim(document.getElementById("find").value).toLowerCase();
    if (tempCat == '') {
//    	alert(23);
      var $filteredData2 = $data.find('div[data-marker=all]');
    } else {
      var $filteredData2 = $data.find('div[data-marker=all]').filter(':contains('+tempCat+')');
    }
    $applications.quicksand($filteredData2, {
      duration: 900,
      easing: 'easeInOutQuad',
    	  useScaling: false
    });

}

function initFilters(){
	  // get the first collection
	  $applications = $('#jscontainer');

	  // clone applications to get a second collection
	  $data = $applications.clone();
}